//配置调用函数(粒子动画效果)
CanvasParticle( config = {
    vx: 4,	//小球x轴速度,正为右，负为左
    vy: 4,	//小球y轴速度
    height: 2,	//小球高宽，其实为正方形，所以不宜太大
    width: 2,
    count: 200,		//点个数
    // color: "121, 162, 185", 	//点颜色
    color: "200,193,193", 	//点颜色
    // stroke: "130,255,255", 		//线条颜色
    // stroke: "240,250,228", 		//线条颜色
    stroke: "0,0,0", 		//线条颜色
    dist: 6000, 	//点吸附距离
    e_dist: 20000, 	//鼠标吸附加速距离
    max_conn: 10 	//点到点最大连接数
});

let ul=document.querySelector('.select')

let xuanran=document.querySelector('.xuanran')
let xrp=document.querySelector('.xrp')

let sprice=document.querySelector('.s-price')
let sunprice=document.querySelector('.s-unprice')

let data = [
    {"count": 4000, "price": 1200, "unitPrice": "0.3000"},
    {"count": 8000, "price": 2000,"unitPrice": "0.2500" },
    {"count": 40000, "price": 8000, "unitPrice": "0.2000" }
   ]

//渲染数据
data.forEach(function(v,i){
    let html=``
    
    html+=`
    <li class="xrli" 
    data-i=${i+1} 
    data-price=${v.price}
    data-unit-price=${v.unitPrice}>${v.count}次
    <img class="select-img ${i===0 ? "show":""}" 
    src="../../assets/imgs/select.png" >
    </li>
    `
     ul.innerHTML+=html
})

 index = 1
/* 广告价格切换部分 */
ul.addEventListener('click',function(e){
   
    
    if(e.target.classList.contains('xrli')){


        e.target.children[0].classList.add('show')
        
       
       ul.children[index].children[0].classList.remove('show')

       sprice.textContent='¥'+ e.target.dataset.price
        
       sunprice.textContent=e.target.dataset.unitPrice

       index = e.target.dataset.i

      
    }
    
})




/* 选项卡部分 */
let litab=document.querySelectorAll('.litab')
let listyle=document.querySelectorAll('.listyle')

let i=0
litab.forEach(function(v,index){
    
    v.addEventListener('click',function(){

        litab[i].classList.remove('live')

        litab[index].classList.add('live')

        listyle[i].classList.remove('in-force')
        listyle[index].classList.add('in-force')

        i=index
    })

})

